import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {personAction} from "../../redux/actions/person"
// 首先使用connect组件
import {connect} from 'react-redux'
 class person extends Component {
    btn=()=>{
        const name=this.name.value
        const age=this.age.value
        // 把拿到的数据放进新的对象，整合送走，
        const personObj={id:nanoid(),name,age}
        this.props.jiayiren(personObj)
        this.name.value=''
        this.age.value=''
        // console.log(name,age)
    }
    render() {
        return (
            <div>
                <p>上方总和为{this.props.zonghe}</p>
            <input ref ={c=>this.name=c}type="text" placeholder="名称"/>
            <input ref ={c=>this.age=c}type="text" placeholder="年龄"/>
            <button onClick={this.btn}>添加</button>
            <ul>
                {this.props.personList.map(p=>{
                    return <li key={p.id}>{p.name}----{p.age}</li>
                })}
            </ul>
            </div>
        )
    }
}
//ui组件建立联系，和取出store的值
export default connect(
    state=>({personList:state.person,zonghe:state.count}),
    {jiayiren:personAction}  
)(person)
